import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { RecommendItemWrapper } from './style'
import { Link } from 'react-router-dom'

interface Iprops {
    children?: ReactNode
    imgUrl: string
    linkUrl?: string
    imgAlt?: string
    players?: number
    name?: string
}

const RecommendItem: React.FC<Iprops> = (props) => {
    const { imgUrl, linkUrl = '/', imgAlt = '图片加载失败', players = 0, name = '标语' } = props

    function formatPlayers(players: number) {
        if (players <= 10000) {
            return players.toString()
        } else {
            return Math.floor(players / 10000) + '万'
        }
    }

    return (
        <RecommendItemWrapper>
            <img src={imgUrl} alt={imgAlt}></img>
            <div className="item">
                <Link to={linkUrl}>
                    <div className="item-top"></div>
                </Link>
                <div className="item-bottom">
                    <div className="earphone-icon"></div>
                    <div className="players">{formatPlayers(players)}</div>
                    <div className="listen"></div>
                </div>
            </div>
            <Link to={linkUrl}>
                <span className="item-name">{name}</span>
            </Link>
        </RecommendItemWrapper>
    )
}

export default memo(RecommendItem)
